<template>
  <div>
    <Card>
      <!-- 没有选中下级-->
      <div style="height:150px;" v-if="!assigneTo&&type!='my'">
        <template>
          <Row>
            <Col :span="5" class="circlediv">
              <i-circle :percent="100" stroke-color="#F5F5DC">
                <span class="demo-Circle-inner" style="font-size:12px">
                  {{searchAssigneTos.length||0}}
                  <br />下级人数
                </span>
              </i-circle>
            </Col>

            <Col :span="5" class="circlediv">
              <i-circle :percent="100" stroke-color="#F5F5DC">
                <span class="demo-Circle-inner" style="font-size:12px">
                  {{staticData.clueTotal||0}}
                  <br />任务总数
                </span>
              </i-circle>
            </Col>

            <Col :span="5" class="circlediv">
              <i-circle :percent="100" stroke-color="#F5F5DC">
                <span class="demo-Circle-inner" style="font-size:12px">
                  {{staticData.netCalledTotal||0}}
                  <br />净拨打总数
                </span>
              </i-circle>
            </Col>

            <Col :span="5" class="circlediv">
              <i-circle :percent="100" stroke-color="#F5F5DC">
                <span class="demo-Circle-inner" style="font-size:12px">
                  {{staticData.callTime||0}}(秒)
                  <br />通话总时长
                </span>
              </i-circle>
            </Col>

            <Col :span="5" class="circlediv" style="border-right:none;">
              <i-circle :percent="100" stroke-color="#F5F5DC">
                <span class="demo-Circle-inner" style="font-size:12px">
                  {{staticData.aveCallTime}}
                  <br />平均通话时长
                </span>
              </i-circle>
            </Col>
          </Row>
        </template>
      </div>
      <!-- 选中下级-->
      <div style="height:170px;" v-if="assigneTo||type=='my'">
        <Row style="height:100%;">
          <Col style="height:100%;" :span="5" class="circlediv">
            <i-circle :percent="100" stroke-color="#F5F5DC" :size="110">
              <span
                class="demo-Circle-inner"
                style="font-size:15px;color:blue;cursor: pointer;"
                @click="goClueList('N')"
              >
                {{ getNoCallTotal(staticData)}}
                <br />
              </span>
              <span>剩余拨打名单</span>
            </i-circle>
          </Col>

          <Col :span="5" class="circlediv">
            <i-circle :percent="100" stroke-color="#F5F5DC" :size="150">
              <span class="demo-Circle-inner" style="font-size:15px;color:blue;cursor: pointer;"
               @click="goClueList('')">
                {{staticData.clueTotal||0}}
                <br />
              </span>
              <span>任务总数</span>
            </i-circle>
          </Col>

          <Col :span="14" style="padding: 0 0 0 10px;">
            <Tag color="#87CEFA" class="tagWidth noPointer">
              <div class="ionicLeftDiv">
                <h6>{{hmsTran(staticData.callTime||0)}}</h6>
                <p>通话时长</p>
              </div>
              <Icon class="ionic" type="ios-time-outline" :size="50" />
            </Tag>

            <Tag color="#66CD00" class="tagWidth noPointer">
              <div class="ionicLeftDiv">
                <h6>{{staticData.calledTotal ||0}}</h6>
                <p>拨打总数</p>
              </div>
              <Icon style="color:#000" class="ionic" type="ios-call" :size="50" />
            </Tag>

            <Tag color="#AFEEEE	" class="tagWidth noPointer" >
              <div class="ionicLeftDiv">
                <h6>{{staticData.connectTotal ||0}}</h6>
                <p>已呼通数</p>
              </div>
              <Icon class="ionic" type="ios-contact-outline" :size="50" />
            </Tag>

            <Tag color="#CD5C5C	" class="tagWidth noPointer">
              <div class="ionicLeftDiv">
                <h6>{{staticData.confirmTotal ||0}}</h6>
                <p>成交数</p>
              </div>
              <Icon class="ionic" type="ios-swap" :size="50" />
            </Tag>

            <Tag color="#EE6363" class="tagWidth noPointer">
              <div class="ionicLeftDiv">
                <h6>{{staticData.netCalledTotal ||0}}</h6>
                <p>净拨打数</p>
              </div>
              <Icon class="ionic" type="md-call" :size="50" />
            </Tag>
          </Col>
        </Row>
      </div>
    </Card>
    <!-- <Card style="margin-top:10px;"> -->

    <div id="echartContainer" style="height:500px ;width:100%;  "></div>
    <Row style="margin-top:10px; ">
      <Col :span="7">
        <Card class="reportButtom">
          <i-circle :percent="100" :size="90">
            <span
              class="demo-Circle-inner"
              style="font-size:15px"
            >{{ceil(staticData.netCalledTotal||0,staticData.clueTotal||0)}}%</span>
          </i-circle>
          <div style="width:60%;float: right;text-align: center;">
            <span class="headTitleSize">电销完成率</span>
            <br />(净拨打总数/任务总数)
          </div>
        </Card>
      </Col>
      <Col :span="1">
        <div style="width:10px; height:1px"></div>
      </Col>
      <Col :span="7">
        <Card class="reportButtom">
          <i-circle :percent="100" :size="90" stroke-color="#FF6347">
            <span
              class="demo-Circle-inner"
              style="font-size:15px"
            >{{ceil(staticData.connectTotal||0,staticData.calledTotal||0)}}%</span>
          </i-circle>
          <div style="width:60%;float: right;text-align: center;">
            <span class="headTitleSize">接通率</span>
            <br />(已呼通/拨打总数)
          </div>
        </Card>
      </Col>
      <Col :span="1">
        <div style="width:10px; height:1px"></div>
      </Col>
      <Col :span="7">
        <Card class="reportButtom">
          <i-circle :percent="100" :size="90">
            <span
              class="demo-Circle-inner"
              style="font-size:15px"
            >{{ceil(staticData.confirmTotal||0,staticData.connectTotal||0)}}%</span>
          </i-circle>
          <div style="width:60%;float: right;text-align: center;">
            <span class="headTitleSize">有效转化率</span>
            <br />(已成交/已呼通数)
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<style>
.circlediv {
  border-right: 1px solid;
  text-align: center;
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reportButtom .ivu-card-body {
  display: flex;
  align-items: center;
}
.headTitleSize {
  font-size: 20px;
  font-weight: 800;
}
.tagWidth {
  width: 240px;
  height: 70px;
  padding: 0 30px;
  margin-right: 30px;
  margin-top: 10px;
}
.tagWidth .ionic {
  float: right;
  height: 100%;
  display: flex;
  align-items: center;
}
.tagWidth .ionicLeftDiv {
  width: 50%;
  height: 100%;
  float: left;
  text-align: center;
}
.tagWidth .ionicLeftDiv p {
  font-size: 16px;
  color: #fff;
  font-weight: 800;
}
.tagWidth .ionicLeftDiv h6 {
  font-size: 16px;
  color: #fff;
  font-weight: 800;
  margin-top: 10px;
  /* margin-bottom: 10px; */
}
.tagWidth .ionicLeft {
  display: flex;
  /* text-align: center; */
  align-items: center;
  /* display: block; */
  height: 100%;
  float: left;
}
.noPointer{
 cursor:default;
}
</style>
<script>
import { checkRole, allRoles } from "@/libs/util";
import { constants } from "crypto";
var echarts = require("echarts");

export default {
  data() {
    return {
      adminFlag: false,
      managerFlag: false,
      salesFlag: false,
      myChart: null,
      chartData: [0, 0, 0, 0, 0, 0, 0],
      chartOptions: {},
      queryPs: {},
      staticData: {
        calledTotal: 0,
        clueTotal: 2
      },
      assigneTo: null
    };
  },
  props: {
    search: {
      type: Object,
      default: {}
    },
    type: {
      type: String,
      default: ""
    },
    searchAssigneTos: {
      type: Array,
      default: []
    }
  },
  methods: {
    query() {
      var url = "/report/chart/list/{pageNo}";
      var ps = Object.assign({ type: this.type }, this.search);
      this.queryPs = ps;
      var routeName = this.$route.name;
      this.post(url, ps, { pageNo: 1 }).then(res => {
        if (this.checkIsSsuccess(res)) {
          this.$store.commit("setRouteParam", {
            params: Object.assign({}, ps),
            routeName: routeName
          });

          this.assigneTo = this.search.assigneTo;
          if (res.data.content && res.data.content.length > 0) {
            let obj = res.data.content[0];
            var calledTotal = obj.calledTotal || 0;
            var connectTotal = obj.connectTotal || 0;
            var unConnectTotal = obj.unConnectTotal || 0;
            var unConfirmTotal = obj.unConfirmTotal || 0;
            var confirmTotal = obj.confirmTotal || 0;
            var waitTotal = obj.waitTotal || 0;
            var aveCallTime = this.getCallTimeAvg(connectTotal, obj.callTime);
            obj.aveCallTime = aveCallTime;
            this.staticData = obj;
            var charDataArr = [
              calledTotal,
              this.getNoCallTotal(obj),
              connectTotal,
              unConnectTotal,
              unConfirmTotal,
              waitTotal,
              confirmTotal
            ];
          } else {
            this.staticData = {};
            var charDataArr = [0, 0, 0, 0, 0, 0, 0];
          }
          this.$set(this, "chartData", charDataArr);
        } else {
          this.$Message.error({
            content: res["msg"],
            duration: 0,
            closable: true
          });
        }
      });
    },
    getNoCallTotal(row) {
      if (row && row.clueTotal && row.netCalledTotal!=null) {
        var obj = row.clueTotal - row.netCalledTotal;

        return obj > 0 ? obj : 0;
      }
      return "0";
    },
    getCallTimeAvg(connectTotal, callTime) {
      // if(callTime==0){

      //   return 0;
      // }else{
      //   return Math.round(callTime/connectTotal*100)/100
      // }

      if (connectTotal == 0 || callTime == 0) {
        return "0' 0''"; //平均通话时长
      } else {
        var i = callTime / connectTotal; //转换成秒数
        var m = Math.floor(i / 60); //转换成分钟数
        var s = Math.floor(i - m * 60);
        return m + " ' " + s + " ''";
      }
    },
    download() {},
    initChart() {
      // 基于准备好的dom，初始化echarts实例

      this.myChart = echarts.init(document.getElementById("echartContainer"));
      var options = {
        title: {
          subtext: "单位/个"
        },
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: [
              "已拨打",
              "未拨打",
              "已呼通",
              "未呼通",
              "无意向",
              "待跟进",
              "已成交"
            ],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            data: [100, 200, 300, 400, 500, 600],
            splitLine: {
              show: false //去掉y轴的分割线
            }
          }
        ],
        series: [
          {
            // barWidth: 30,
            name: "数量",
            type: "bar",
            barWidth: "30%", //柱形图宽
            color: "#75b9e6", //柱形图颜色
            data: [0, 0, 0, 0, 0, 0, 0]
          }
        ]
      };
      this.chartOptions = options;
      this.myChart.setOption(options, true);
    },
    ceil(v1, v2) {
      if (v2 == 0) {
        return 0;
      } else {
        return Math.ceil((v1 / v2) * 10000) / 100;
      }
    },
    hmsTran(s) {
      if (s == undefined) {
        return "";
      } else {
        var h = Math.floor(s / 3600);
        var m = Math.floor(s / 60 - h * 60);
        var s = Math.floor(s - m * 60 - h * 3600);
        return h + ":" + m + ":" + s;
      }
    },
    goClueList(callStatus) {
      this.$router.push({
        name: "assigneQuery",
        params: {
          callStatus: callStatus,
          assigneStartDate: this.queryPs.staticDate,
          assigneEndDate:this.queryPs.staticDate,
          assigneTo: this.queryPs.assigneTo
        }
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  watch: {
    chartData(newRoute) {
      this.chartOptions.series[0].data = newRoute;
      this.myChart.setOption(this.chartOptions);
    }
  },
  created() {
    this.salesFlag = checkRole(allRoles.sales);
    this.managerFlag = checkRole(allRoles.manager);
    this.adminFlag = checkRole(allRoles.admin);
  }
};
</script>